<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "f0c66aa2a0343acaae151567832f16fa",
			};
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript">
			AMapLoader.load({
				key: "a89eb9f1e8daf3d7bd1c04a1c8debc0c", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			})
				.then((AMap) => {
					const map = new AMap.Map("container", {
						viewMode: "2D", // 默认使用 2D 模式
						zoom: 11, //初始化地图层级
						center: [104.058382, 30.535907], //初始化地图中心点
					});
				})
				.catch((e) => {
					console.error(e); //加载错误提示
				});
		</script>
	</head>
	<body>
		<main>
			<!-- 头部导航 -->
			<section id="main-one"></section>
			<!-- 第二部分 -->
			<div class="main-two">
				<p>目前累计跑步距离:</p>
				<h1>
					<p></p>
					<span class="fz-16 fc-black">公里</span>
				</h1>
			</div>
			<div class="main-there">
				<div id="container"></div>
				<ul class="fc-white">
					<li class="active">户外跑</li>
					<li>燃脂跑</li>
					<li>跑步机</li>
				</ul>
				<h1>GO</h1>
				<div id="set">
					<span>
						<i class="iconfont icon-shezhixitongshezhigongnengshezhishuxing"></i
					></span>
					<p class="fc-white">设置目标 ></p>
					<span> <i class="iconfont icon-yinle1"></i></span>
				</div>
			</div>
		</main>
		<div id="main-four">
			<strong>跑步路线</strong>
			<p>使用跑步路线,邂逅附近的同行者</p>
		</div>
		<!-- 尾部 -->
		<nav id="tabBar"></nav>
		<!-- //模态框 -->
		<div id="mask"></div>
		<div id="box">3</div>
	</body>
</html>
